<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" session="false" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>zhfeat - 登录</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="<%=basePath%>/hplus/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=basePath%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="<%=basePath%>/hplus/css/animate.min.css" rel="stylesheet">
    <link href="<%=basePath%>/hplus/css/style.min.css" rel="stylesheet">
    <link href="<%=basePath%>/hplus/css/login.min.css" rel="stylesheet">

    <link rel="shortcut icon" href="<%=basePath%>/favicon.ico">
    <link href="<%=basePath%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=basePath%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="<%=basePath%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">

    <style>
        body.signin {
            height: auto;
            background: url(<%=basePath%>/hplus/img/bg.jpg) no-repeat center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            color: rgba(255,255,255,.95);
        }
        .signinpanel .form-horizontal{
            background: rgba(0,0,0,0.4);
            padding:30px;
        }
        .content_tab .nav1{
            width: 100%;
            height: 44px;
            text-align: center;
            float: left;
            border-radius: 3px;
            margin-bottom: 3%;
            font-size: 16px;
            list-style: none;
            padding-left: 0;
        }

        .content_tab .nav1 li{
            width: 50%;
            height: 44px;
            line-height: 44px;
            float: left;
            border-bottom: 2px solid #e1e1e1;
        }

        .content_tab .nav1 li.on{
            border-bottom: 2px solid #18a689;
        }

        .container1{
            width: 100%;
            float: left;
        }

        .container1 ul{
            display: none;
            padding-left: 0;
        }

        .container1 ul li{
            float: left;
        }

        .container1 .surrent{
            display: block;
        }
        .s_codes {
            display: inline-block;
            width: 30%;
            height: 34px;
            line-height: 34px;
            float: right;
            text-align: center;
            background: #f6f6f6;
            border: none;
        }
        .J_xcode{
            width: 40%;
            background: #18a689;
        }
        .alert-danger{
            height: 30px;
            line-height: 30px;
            border-radius: 0;
            padding: 0;
            padding-left: 10px;
        }
        .gray{
            background: #ddd;
        }
    </style>
    <script>
        if(window.top!==window.self){window.top.location=window.location};
    </script>
</head>
<body class="signin">
	<div class="ibox-content" style="height:100px;padding:0;background: rgba(0,0,0,0);"> 
        <img src="<%=basePath%>/hplus/img/logo.png" style="margin:20px 0 0 10%;"/>
    </div>
    <div class="signinpanel" style="margin-top:1%">
        <div class="row">
            <div class="col-sm-7">
                <div class="signin-info">
                    <img src="<%=basePath%>/hplus/img/bulb.png" style="width:240px;" />
                </div>
            </div>
            <div class="col-sm-5">
                <div class="form-horizontal" style="height:360px;">
	                <div class="content_tab">
	                    <ul class="nav1">
	                        <li class="on">密码登录</li>
	                        <li>验证登录</li>
	                        <div style="clear:both"></div>
	                    </ul>
	                    <div class="container1">
	                        <ul class="surrent">
	                            <input type="text" class="form-control uname" placeholder="请填写手机号" id="J-xphone" maxlength="11"/>
	                            <input type="password" class="form-control pword m-b" placeholder="请填写密码" id="login_pwd" maxlength="20"/>
	                            <!-- 验证码暂时屏蔽
	                            <input type="text" style="width:66%;display:inline-block;margin-top:0;color:#000;" class="form-control" placeholder="请填写验证码" id="sCode" maxlength="4"/>
	                            <img src=""  class="s_codes" border=0 id="numImg" title="看不清，换一张!" onclick="imgChange(this)"/>
	                             -->	
	                             
	                            <div class="col-sm-8" style="display:inline-block;padding-left:0;">
	                                <label class="checkbox-inline i-checks">
	                                    <div class="icheckbox_square-green" style="position: relative;">			
	                                    	<input  id="remberPass" type="checkbox" value="option1" style="position: absolute; opacity: 0;">
	                                    		<ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;"></ins>
	                                    </div>记住密码
	                                </label>
	                            </div>
	                            
	                            <a href="<%=basePath%>/view/ui/recoverPwd" class="text-navy" style="float:right;margin-top:8px;">忘记密码</a>
	                            <button class="btn btn-block btn-primary" style="margin:50px 0 10px;border-radius:0;" id="login_button">登录</button>
                                <!-- <a href="<%=basePath%>/ui/registerOne" class="text-navy" style="float:right;margin-top:8px;">申请试用</a> -->
                                <div class="alert alert-danger" style="display:none;"></div>
	                        </ul>			
	                        <ul>		
	                            <input type="text" class="form-control uname" placeholder="请填写手机号" style="margin-bottom:15px;" id="J-xphone2" maxlength="11"/>
	                            <input type="text" style="width:56%;display:inline-block;margin-top:0;color:#000;" class="form-control" placeholder="请填写验证码"  id="login_code" maxlength="6"/>
	                            <input type="button" value="发送验证码" class="s_codes J_xcode" id="send_login_code">
	                            <button class="btn btn-block btn-primary" style="margin:40px 0 10px;border-radius:0;" id="login_button2">登录</button>
	                            <div class="alert2 alert-danger" style="display:none;"></div>
	                        </ul>
	                    </div>
	                    <div style="clear:both"></div>
	                </div>
                </div>
            </div>		
        </div>
        
        <div class="text-center" style="margin-top:80px;">
            zhfeat<div style="height:8px;"></div>
           	 京ICP备14042499号-4
        </div>        
    </div>
    <script src="<%=basePath%>/hplus/js/jquery.min.js?v=2.1.4"></script>
    <script src="<%=basePath%>/hplus/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="<%=basePath%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
    <script>
    	
    	
    	$(document).ready(function(){$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",})});
        $('.nav1 li').click(function(){
            $(this).addClass('on').siblings().removeClass();
            var index = $(this).index();
            $('.container1 ul').removeClass('surrent').eq(index).addClass('surrent');
        });
        	
    	var code_id ;
        $(function(){
        	getCookie();
            $('.J_xcode').click(function(){
            	$('.alert2').hide();
            	var check_phone = checkPhone2();
            	if(check_phone){
            		
                	var account = $('#J-xphone2').val();
                	console.log(account+"---000")
                	var url = "${pageContext.request.contextPath}/smsSend/ajaxSendCode";
                	$.post(url,{
                		"account":account,
                		"codeType":"login_code"
                		},
                		function(data){
                			console.log("data_status:"+data.status);
                			if(data.status == "200"){
                				console.log("0");
                				//发送成功
                				daojishi();
                				code_id = data.tag;
                			}
                			if(data.status == "501"){
                				//发送失败
                				$('.alert2').text(data.message);
                				send_times = false;
                				if(data.message == "请稍后发送"){
                					send_times = true;
                				}else if(data.message == "您尚未注册,请先注册"){
                					$('.alert2').text(data.message);
                    				$('.alert2').show();
                    				return false;
                				}
                			}	
                		},"json");
            	}
            });
            
            function daojishi(){
            	var $this = $(this),
                _this = this,
                i = 60;
    	        //_this.disabled = 'disabled';
    	        $('#send_login_code').attr('disabled',"true");
    	        clearInterval(repeat);
    	        var repeat = setInterval(function(){
    	            i--;
    	            if(i == 0){
    	                //_this.disabled = false;
    	                $('#send_login_code').removeAttr('disabled');
    	                $('#send_login_code').removeClass('gray').val('发送验证码');
    	                clearInterval(repeat);
    	            }else{
    	            	console.log("gray_daojishi");
    	            	$('#send_login_code').addClass('gray').val(i+'s后重新获取');
    	            }
    	        },1000);
            }
        });
        
        function checkAll2(){
			var resultC = checkCode();
			var resultP = checkPhone2();
			if(resultP && resultC){
				return true;
			}
			if(!resultP){
				return false;
			}
			if(!resultC){
				return false;
			}
	    }
        
        $('#login_button2').click(function(){
        	var result = checkAll2();
        	if(!result){
        		return;
        	}
        	
        	var url = "${pageContext.request.contextPath}/login/ajaxLogin";
        	var account = $('#J-xphone2').val();
        	var login_code = $('#login_code').val();
        	$.post("${pageContext.request.contextPath}/smsSend/ajaxSmsVerify",
        			{"account":account,
        			"verCode":login_code,
        			"codeType":"login_code",
        			"codeId":code_id},
		        	function(data){
		        		//验证码校验成功
		        		if("200"== data.status){
			            	$.post(url,{
			            		"account":account,
			            		"verCode":login_code,
			            		"codeType":"login_code"
			            	},function(data){
			            		if("200" == data.status){
			            			window.location.href="${pageContext.request.contextPath}/view/ui/main";
			            		}else if("501" == data.status){
			            			var error = data.message;
			            			$('.alert2').text(error);
			            			$('.alert2').show();
			            			$('#login_code').val("");
			            		}
<%-- 			            		else if("2" == data.status){
			            			showDialog("您的账号尚未设置密码,且连续登陆5次,为了安全考虑，请先设置密码");
			            			window.location.href="${pageContext.request.contextPath}/ui/recoverPwd";
			            		}else if("3" ==  data.status){
			            			var json = '{type :"FristType",key :"name",value :""},{type :"FristType",key :"gender",value :""},{type :"FristType",key :"phone",value :""},{type :"FristType",key :"email",value :""},{type :"FristType",key :"company",value :""},{type :"FristType",key :"job",value :""},{type :"FristType",key :"remarks",value :""},';
			            			$.post('<%=path%>/api/ComponentStructure/insert_ComponentStructure',{"controlhierarchystrings":json});
			        	  			window.location.href="${pageContext.request.contextPath}/ui/perInforCon";
			        	  		}else if ("70001" == data.status){
			                    	window.location.href = "${pageContext.request.contextPath}/ui/perChooseInfo";
			                    } --%>
			            	});
		        		}else{
		        			//校验码失败
		        			var error = data.message;
		        			$('.alert2').text(error);
		        			$('.alert2').show();
		        			$('#login_code').val("");
		        		}
		        	},"json");
      	});
    </script>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/system/jquery.base64.js"></script>

<script>
    var error;
    $(function () {

        /* 判断十天登陆 */
        $(document).keyup(function () {
            if (event.keyCode == "13") {
                $('#login_button').click();
            }
        });
        //点击登录，触发提交          $('#').val();
        $('#login_button').click(function () {
            var check_all = checkAll();
            /*  checkTimes(); */
            if (check_all) {
            	console.log("check_all");
                var acc = $('#J-xphone').val();
                var pwd = $('#login_pwd').val();
                var sCode = $('#sCode').val();
                var url = "${pageContext.request.contextPath}/login/ajaxLogin";
                var params = {
                    "account": acc,
                    "pwd": pwd
                };
                $.post(url, params, function (data) {
                    if ("200" == data.status) {				
	                    setCookie();  				
                        //下一步的url	
                        window.location.href = "<%=basePath%>/view/ui/main";			
                    } else if ("501" == data.status || "502" == data.status) {
                        /* 显示错误 */
                        error = data.message
                        $('.s_red_two').text(error);
                        /* 重置密码 */					
                        $('#sCode').val("");								
                        if (error == "安全码有误") {
                        	$('.alert').text("验证码错误，请重新输入！");
                            $('.alert').show();
                            document.getElementById("sCode").Value = "";
                            return false;
                        } else if (error == "安全码不能为空") {
                        	$('.alert').text("请输入验证码！");		
                            $('.alert').show();
                            document.getElementById("sCode").Value = "";
                            return false;
                        } else if (error == "密码错误") {
                        	$('.alert').text("用户名或密码不正确！");		
                            $('.alert').show();
                            document.getElementById("sCode").Value = "";
                            return false;
                        } else if (error == "该账号为失效状态，如果有问题请联系管理员"){
                        	$('.alert').text("该账号已停用！");		
                            $('.alert').show();
                            document.getElementById("sCode").Value = "";
                            return false;
                        }else if("501" == data.error_code){
                        	$('.alert').text("尚未注册,请先注册");
                            $('.alert').show();
                        }else {
                            $('#login_pwd').val("");
                            error_times++;
                        }
                        checkTimes(error_times);
                        //$('#numImg').attr("src", "<%=request.getContextPath()%>/image.jsp?" + Math.random());
                    } else if ("2" == data.status) {
                        $('.s_red_two').text('您尚未设置密码，请使用短信验证登陆');
                        $('#J-xphone').attr('disabled', 'disabled');
                        $('#login_pwd').attr('disabled', 'disabled');
                    } else if ("3" == data.status) {
                        var json = '{type :"FristType",key :"name",value :""},{type :"FristType",key :"gender",value :""},{type :"FristType",key :"phone",value :""},{type :"FristType",key :"email",value :""},{type :"FristType",key :"company",value :""},{type :"FristType",key :"job",value :""},{type :"FristType",key :"remarks",value :""},';
                        $.post('<%=path%>/api/ComponentStructure/insert_ComponentStructure', {"controlhierarchystrings": json});
                        window.location.href = "${pageContext.request.contextPath}/ui/perInforCon";
                    } else if ("70001" == data.status){
                    	window.location.href = "${pageContext.request.contextPath}/ui/perChooseInfo";
                    }
                }, "json");
            }
        });

        /* 获得焦点，清空错误 */
        $('#J-xphone').focus(function () {
            $('.alert').text('');
            $('.alert').hide();
        });
        $('#J-xphone2').focus(function () {
            $('.alert2').text('');
            $('.alert2').hide();
        });
        $('#login_pwd').focus(function () {
            $('.alert').text('');
            $('.alert').hide();
        });
    });
</script>
<script type="text/javascript">
    function checkPhone() {
        var reg = /^1(3|4|5|7|8)\d{9}$/;//正则表达式
        var tel = $('#J-xphone').val();
        if (tel == '' || tel == null) {
            $('.alert').text("请输入手机号！");
            $('.alert').show();
            document.getElementById("J-xphone").Value = "";
            return false;
        }
        //匹配
        var result = reg.test(tel);
        if (!result) {
            //手机号格式不正确，执行下面
            $('.alert').text("不是正确的11位手机号");
            $('.alert').show();
            document.getElementById("J-xphone").Value = "";
            return false;
        } else {
            //手机号格式正确
            return true;
        }
    }
    
    function checkPhone2() {
        var reg = /^1(3|4|5|7|8)\d{9}$/;//正则表达式
        var tel = $('#J-xphone2').val();
        if (tel == '' || tel == null) {
            $('.alert2').text("请输入手机号！");
            $('.alert2').show();
            document.getElementById("J-xphone2").Value = "";
            return false;
        }
        //匹配
        var result = reg.test(tel);
        if (!result) {
            //手机号格式不正确，执行下面
            $('.alert2').text("不是正确的11位手机号");
            $('.alert2').show();
            document.getElementById("J-xphone2").Value = "";
            return false;
        } else {
            //手机号格式正确
            return true;
        }
    }

    function checkPwd() {
    	var pwd = $('#login_pwd').val();
    	if(pwd == '' || pwd == null){
    		$('.alert').text("请输入密码！");
            $('.alert').show();
            document.getElementById("login_pwd").Value = "";
            return false;
    	}
        return true;
    }
    
    function checkCode(){
		/* if(send_times){
			$('.alert2').text("请先发送验证码");
			return false;
		} */
		var ver_code = $('#login_code').val();
		if(ver_code != null && ver_code != ''){
			return true;
		}
		$('.alert2').text("手机验证码不能为空!");
		$('.alert2').show();
		return false;
	}

    function checkAll() {
        var fl_pwd = checkPwd();
        var fl_phone = checkPhone();
        if (fl_phone) {
            if (fl_pwd) {
                return true;
            } else {
                return false;
            }
        } else {
            return false;
        }
    }
    
    
    function setCookie(){ //设置cookie    
        var loginCode = $("#J-xphone").val(); //获取用户名信息    
        var pwd = $("#login_pwd").val(); //获取登陆密码信息    
        var checke = null;
        if($('#remberPass').is(':checked')) {
            $.cookie("login_code",loginCode,{expires:7});//调用jquery.cookie.js中的方法设置cookie中的用户名，保存7天 
            $.cookie("pwd",$.base64.encode(pwd),{expires:7});//调用jquery.cookie.js中的方法设置cookie中的登陆密码，并使用base64（jquery.base64.js）进行加密，保存7天     
        	}else{
        	$.cookie("pwd", null);   	
        	}
   	}  
    
   function getCookie(){ //获取cookie    
        var loginCode = $.cookie("login_code"); //获取cookie中的用户名    
        var pwd =  $.cookie("pwd"); //获取cookie中的登陆密码    
        if(pwd){//密码存在的话把“记住用户名和密码”复选框勾选住    
           $('#remberPass').iCheck('check'); 		
        }    
        if(loginCode){//用户名存在的话把用户名填充到用户名文本框    
           $("#J-xphone").val(loginCode);    
        }    					
        if(pwd){//密码存在的话把密码填充到密码文本框    
           $("#login_pwd").val($.base64.decode(pwd));   
        }    
   }   
   
</script>
<script type="text/javascript">
    var error_times = 0;

    function checkTimes(error_times) {
        if (error_times >= 3) {
            $('.s_red_two').text("您已输错三次密码,建议您修改密码");
            if (error_times >= 10) {
                $('.s_red_two').text("您已输错十次密码,强烈建议您修改密码");
            }
        }
    }

    function imgChange(obj) {
        $(obj).attr("src", "<%=request.getContextPath()%>/image.jsp?" + Math.random());
    }
</script>
<script type="text/javascript">
    $(function () {
        setTimeout(function () {
            $('#numImg').click();
        }, 100);
    });
</script>
<script type="text/javascript">
    <%-- $('#numImg').attr('src','<%=path%>/image.jsp'); --%>
    //$('#numImg').click();
    function toShow() {
        window.loaction.href = "http://cecook.cn/";
    }
    var input_list = [1, 2];
</script>
</html>